<!--
    当前有效的提前结清报价清单 弹窗 专用插件

    参数：
    modal       弹窗开关
    isSP        是否是经销商
    modalTitle  弹窗title
    getDataFn   Api
    dataDict    数据字典

    方法:
    showContractDetial  进入详情页
    closeModal          关闭弹窗
 -->
<template>
    <Modal
        :title="modalTitle"
        v-model="isModalOpen"
        :mask-closable="false"
        :width="1200"
        :styles="{top: '30px'}"
        @on-visible-change="changeModalState"
    >
        <div class="ActivatedCase">
            <!-- 此页面聚合了cms数据，由于cms系统查询时间过长，无法支持模糊搜索，使用模糊搜索无法使用索引，所以此页面不再支持模糊搜索 -->
            <Form ref="formValidate" :model="formValidate" :label-width="100">
                <Row>
                    <Col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" :xxl="8">
                        <FormItem label="申请编号" prop="applyNo">
                            <Input clearable v-model="formValidate.applyNo" placeholder/>
                        </FormItem>
                    </Col>

                    <Col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" :xxl="8">
                        <FormItem label="客户姓名" prop="custName">
                            <Input clearable v-model="formValidate.custName" placeholder/>
                        </FormItem>
                    </Col>
                    <Col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" :xxl="8">
                        <FormItem label="证件号码" prop="certNo">
                            <Input clearable v-model="formValidate.certNo" placeholder/>
                        </FormItem>
                    </Col>
                    <Col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" :xxl="8">
                        <FormItem label="联系方式" prop="phone">
                            <Input clearable v-model="formValidate.phone" placeholder/>
                        </FormItem>
                    </Col>

                    <Col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" :xxl="8" v-if="!isSP">
                        <FormItem label="合同号" prop="contractNo">
                            <Input clearable v-model="formValidate.contractNo" placeholder/>
                        </FormItem>
                    </Col>
                    <Col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" :xxl="8" v-if="!isSP">
                        <FormItem label="案件编号" prop="caseNo">
                            <Input clearable v-model="formValidate.caseNo" placeholder/>
                        </FormItem>
                    </Col>

                    <Col span="24">
                        <div class="text-center contract-close-btns">
                            <Button type="primary" @click="handleSubmit('formValidate')" icon="ios-search"
                                    style="margin-right:16px">搜索
                            </Button>
                            <Button type="primary" @click="handleReset('formValidate')" icon="ios-trash-outline">重置
                            </Button>
                        </div>
                    </Col>
                </Row>
            </Form>
            <div class="new-apply-table">
                <Row>
                    <Col span="24">
                        <Table
                            width="100%"
                            maxHeight="300"
                            :columns="isSP ? contractTableHeadPartner : contractTableHead"
                            :data="contractTable.records"
                            :loading="loading"
                            @on-row-dblclick="dblclickShowDetial"
                        >
                            <!-- 合同状态/合同申请状态 -->
                            <template v-if="!isSP" slot-scope="{ row, index }" slot="contractStatus">
                                <span>{{getTitle('contractStatus',row.contractStatus)}}</span>
                            </template>
                            <!-- 渠道类型 -->
                            <template v-if="!isSP" slot-scope="{ row, index }" slot="debitOrderStatus">
                                <span>{{getTitle('validOrInvalid',row.debitOrderStatus)}}</span>
                            </template>
                        </Table>
                    </Col>
                    <Col span="24">
                        <Row type="flex" justify="end" class="table-page">
                            <Page
                                :current="contractTable.current"
                                :transfer="true"
                                :total="contractTable.total"
                                :page-size="contractTable.pageSize"
                                @on-change="changePage"
                                @on-page-size-change="changePageSize"
                                :page-size-opts="pageSizeOpts"
                                size="small"
                                show-total
                                show-elevator
                                show-sizer
                            ></Page>
                        </Row>
                    </Col>
                </Row>
            </div>
        </div>
        <div slot="footer"></div>
    </Modal>
</template>

<script>
    import {
        isPhoneValiate,
        doValidID,
        isNameValiate, getTitleFromDataDict
    } from "_p/basic/assets/contract/js/utils";
    import {
        findByContractNo
    } from "_p/basic/api/contract/activated-case/index";
    import {getValidPrepaymentApply} from "@/projects/basic/api/contract/clearance/stay-settle";

    export default {
        // 已激活案件列表 弹窗
        name: "ActivatedCase",
        components: {},
        props: {
            dataDict: {
                type: Object
            },
            contractBusiness: {
                type: Array
            },
            handleBusiness: {
                type: String,
                required: false
            },
            modal: {
                type: Boolean,
                required: true
            },
            isSP: {
                type: Boolean,
                required: true,
                default: true
            },
            modalTitle: {
                type: String,
                default: "提前还款申请列表"
            },
            getDataFn: {
                type: Function,
                required: false
            },
        },
        data() {
            return {
                isModalOpen: this.modal,
                loading: false,
                formValidate: {
                    applyNo: "", // 申请编号
                    certNo: "", // 证件号码
                    contractNo: "", // 合同号
                    contractStatusEnum: "", // 合同状态
                    custName: "", // 客户名称
                    endDate: "", //合同到期时间
                    startDate: "", //合同激活时间
                    phone: "", //手机号码
                    pageNumber: 1, // integer($int32) // 当前页
                    pageSize: 10, //integer($int32) // 多少条
                    pageIndex: 0, //integer($int32) // 跳过多少条
                    pageTotal: 0
                },
                ruleInline: {
                    phone: [
                        {
                            required: false,
                            validator: isPhoneValiate,
                            trigger: "change"
                        }
                    ],
                    custName: [
                        {
                            required: false,
                            validator: isNameValiate,
                            trigger: "change"
                        }
                    ],
                    certNo: [
                        {required: false, validator: doValidID, trigger: "change"}
                    ]
                },
                // 日期区间
                isDateErr: false,

                contractTableHead: [
                    {
                        title: "申请编号",
                        key: "applyNo",
                        minWidth: 100
                    },
                    {
                        title: "合同号",
                        key: "contractNo",
                        minWidth: 100
                    },
                    {
                        title: "客户姓名",
                        key: "custName",
                        minWidth: 100
                    },
                    {
                        title: "报价日期",
                        key: "prepaymentRequestTime",
                        minWidth: 100
                    },
                    {
                        title: "结算日期",
                        key: "repayDate",
                        minWidth: 100
                    },
                    {
                        title: "应收净额",
                        key: "receivableAmount",
                        minWidth: 100
                    },
                    {
                        title: "合同状态",
                        key: "contractStatus",
                        slot: "contractStatus",
                        minWidth: 100
                    },
                    {
                        title: "案件编号",
                        key: "caseNo",
                        minWidth: 100
                    },
                    {
                        title: "扣款指令",
                        key: "debitOrderStatus",
                        slot: "debitOrderStatus",
                        minWidth: 100
                    },
                    {
                        title: "联系方式",
                        key: "phone",
                        minWidth: 100
                    }
                ],
                contractTableHeadPartner: [
                    {
                        title: "申请编号",
                        key: "applyNo",
                    },
                    {
                        title: "客户姓名",
                        key: "custName",
                    },
                    {
                        title: "证件号码",
                        key: "certNo",
                    },
                    {
                        title: "联系方式",
                        key: "phone",
                    },
                    {
                        title: "主体类型",
                        key: "custRole",
                        slot: "PersonRoleType"
                    }
                ],
                contractTable: {
                    current: 1,
                    pages: 0,
                    searchCount: false,
                    size: 10,
                    total: 0,
                    orders: [],
                    records: []
                },
                pageSizeOpts: [10, 20, 50, 100]
            };
        },
        watch: {
            modal: function (newVal) {
                if (newVal) {
                    this.isModalOpen = newVal;
                    this.loading = true;
                    this.getList(this.formValidate);
                }
            }
        },
        methods: {
            getList(data) {
                data.total = this.contractTable.total
                getValidPrepaymentApply(data).then(res => {
                    this.loading = false;
                    if (res.code === "0000") {
                        this.contractTable = res.data;
                    }
                }).catch(e => {
                    this.loading = false;
                });
            },
            // 提交搜索
            handleSubmit(name) {
                if (this.loading) return;
                this.$refs[name].validate(valid => {
                    if (valid) {
                        this.loading = true;
                        this.getList(Object.assign({}, this.formValidate, {pageNumber: 1}));
                    }
                });
            },
            handleReset(name) {
                this.$refs[name].resetFields();
                this.handleSubmit(name);
            },
            // 分页

            changePageSize(num) {
                this.loading = true;
                this.getList(
                    Object.assign({}, this.formValidate, {pageSize: num})
                );
                this.formValidate.pageSize = num;
            },

            changePage(num) {
                this.loading = true;
                this.getList(
                    Object.assign({}, this.formValidate, {pageNumber: num})
                );

                this.formValidate.pageNumber = num;

            },
            // 跳转详情页
            dblclickShowDetial(row) {
                if ("true" == row.isOverDate){
                    this.$Message.error("已超过结算日期，不可发起对公还款");
                    return false;
                }
                this.loading = true;
                let params = {
                    contractBusiness: this.contractBusiness,
                    contractNo: row.contractNo,
                    handleBusiness: this.handleBusiness,
                    isSP: this.isSP
                };
                let request;
                if (!this.isSP) {
                    request = 'contractManage';
                } else {
                    request = 'apply';
                }
                findByContractNo(params, request).then(res => {
                    if (res.code === "0000") {
                        if ("valid" == row.debitOrderStatus){
                            this.$Modal.confirm({
                                title: "确认收款",
                                content: "存在有效的提前结清扣款指令，是否确认继续对公收款操作?",
                                onOk: () => {
                                    this.showDetial(row);
                                }
                            });
                        }else{
                            this.showDetial(row);
                        }
                    }
                    this.loading = false;
                }).catch(e => {
                    this.loading = false;
                });
            },
            showDetial(row) {
                //赋值数据来源字段
                row.dataSource = row.dataSource;
                row.prepaymentApplyId = row.id;
                this.isModalOpen = false;
                this.$emit("showContractDetial", row);
            },
            //  弹窗切换
            changeModalState(bool) {
                if (!bool) this.$emit("closeModal");
            },
            getTitle(type, val) {
                let data = this.dataDict[type + "Dict"] || [];
                return getTitleFromDataDict(data, val);
            }
        }
    };
</script>
<style scoped lang="less">
    .vertical-center-modal {
        display: flex;
        align-items: center;
        justify-content: center;

        .ivu-modal {
            top: 0;
        }
    }

    .ActivatedCase {
        .new-apply-table {
            padding-top: 18px;
        }

        .table-page {
            padding-top: 16px;
        }
    }

    .text-center {
        text-align: center;
    }
</style>
